import React from 'react';
import { Card, Row, Col, Typography, Button } from 'antd';
import { HomeOutlined, BulbOutlined, LineChartOutlined, MoneyCollectOutlined, UserOutlined } from '@ant-design/icons';
import './Home.scss';
import Logo from '../../assets/img/manbo.png'; // 假设Logo图片存放在assets/img目录下

const { Title } = Typography;

const modules = [
    {
        key: 'strategy',
        title: '交易策略',
        description: '管理和回测您的交易策略。',
        icon: <BulbOutlined />,
        color: '#ffa940',
    },
    {
        key: 'stock',
        title: '股票行情',
        description: '查看最新的单股和多股行情。',
        icon: <LineChartOutlined />,
        color: '#1890ff',
    },
    {
        key: 'trade',
        title: '股票交易',
        description: '轻松完成您的股票交易。',
        icon: <MoneyCollectOutlined />,
        color: '#52c41a',
    },
    {
        key: 'user',
        title: '用户信息',
        description: '查看并编辑您的用户信息。',
        icon: <UserOutlined />,
        color: '#722ed1',
    },
];

const Home = () => {
    return (
        <div className="home-container" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#f0f2f5' }}>
            {/* 中心 LOGO */}
            <div className="logo-section" style={{ textAlign: 'center', marginBottom: '30px' }}>
                
                <img className="logo" src={Logo} alt="logo" style={{ width: '300px', marginBottom: '20px' }} />
                <Title level={2} className="welcome-title" style={{ marginBottom: '10px' }}>欢迎来到 SIAP of Manbo</Title>
                <Title level={4} className="welcome-subtitle" style={{ color: '#888' }}>探索强大的功能模块，助力您的金融决策。</Title>
            </div>

            {/* 按钮模块布局 */}
            <Row gutter={[30, 30]} justify="center" align="middle" className="modules-section" style={{ maxWidth: '800px', textAlign: 'center' }}>

                {modules.map((module) => (
                    <Col key={module.key} xs={24} sm={12} md={12} lg={12}>
                        <Card
                            hoverable
                            className="module-card"
                            style={{
                                backgroundColor: module.color,
                                borderRadius: '8px',
                                textAlign: 'center',
                                boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
                            }}
                            bodyStyle={{ padding: '20px' }}
                            onClick={() => {
                                window.location.href = `/${module.key}`;
                            }}
                        >
                            <div className="module-icon" style={{ fontSize: '24px', color: '#fff', marginBottom: '10px' }}>
                                {module.icon}
                            </div>
                            <Title level={4} style={{ color: '#fff', marginBottom: '8px' }}>
                                {module.title}
                            </Title>
                            <p style={{ color: '#fff', opacity: 0.9 }}>{module.description}</p>
                        </Card>
                    </Col>
                ))}
            </Row>

            {/* 页脚按钮 */}
            <div className="footer-note" style={{ marginTop: '40px' }}>
                <Button
                    type="link"
                    href="https://gitee.com/redkold/group1-siap"
                    target="_blank"
                    icon={<HomeOutlined />}
                    style={{ fontSize: '16px', color: '#888' }}
                >
                    关于我们
                </Button>
            </div>
        </div>
    );
};

export default Home;
